<template>
	<view class="content">
		<view class="content-head">
			<view class="content-title">
				{{areaEditor.title}}
			</view>
			<image @click="cancel" class="content-title-cancel" src="/static/images/others/cancel.png" mode=""></image>
			<view class="" style="height: 50px;">
				<om-topbutton class="om-topbutton" :hasBgColor="true" placeHolder="搜索地址" @click='searchTab'></om-topbutton>
			</view>
			<view class="content-title-show">
				<view class="content-title-showSelect">
					<view :class="{'content-title-showSelect-active':(index == active)}" 
						class="content-title-showSelect-item" v-for="(item,index) of selectArr" :key="index"
						@click="showItemClick(index)" >
						<view class="">
							{{item.title}}
						</view>
					</view>
					<view v-show="selectArr.length < 3" :class="{'content-title-showSelect-active':!isBack}" style="margin-left:15px">
						{{'请选择'}}
					</view>
				</view>
			</view>
		</view>
		<view class="parent-area-scroll">
			<view class="parent-area-scroll-tips">
				<view class="area-scroll-tips" v-if="active == 0">
					{{'请选择省份/地区'}}
				</view>
				<view class="area-scroll-tips" v-else-if="active == 1">
					{{'请选择城市'}}
				</view>
				<view class="area-scroll-tips" v-else>
					{{'请选择区/县'}}
				</view>
				<view @click="comfirm" class="om-save-btn area-scroll-tips-btn" style="width: 100rpx;text-align: center;">
					{{'完成'}}
				</view>
			</view>
			<scroll-view :scroll-top="scrollTop" @scroll="scroll" scroll-y="true" class="area-scroll-view">
				<view class="content-place flex" v-for="(value,key,i) in showObj" :key="key">
					<view class="content-place-key">
						{{key}}
					</view>
					<view class="content-place-name">
						<view @click="placeClick(item)"  :class="{'content-place-name-check_check_color':item.checked}" class="content-place-name-check" style=" margin-left: 20px;"  v-for="(item,index) in showObj[key]">
							<view class="" >
								{{item.dicname}}
							</view>
							<view v-show="item.checked" class="content-place-name-check_check">
								{{'√'}}
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {
		getUrl
	} from '@/static/js/common.js'
	export default{
		name:'OmArea',
		props:{
			title:{
				type:String,
				default:''
			},
			areaEditor:{
				type:Object,
				default:{}
			},
			areaString:{
				type:String,
				default:()=>{}
			}
		},
		data(){
			return{
				isFixed:false,
				showObj:{},
				selectArr:[],
				active:0,
				isBack:false,
				placeItem:{},
				scrollTop:0,
				old: {
					scrollTop: 0
				}
			}
		},
		methods:{
			goTop(e) {
				let _that = this
				_that.scrollTop = _that.old.scrollTop
				_that.$nextTick(function() {
					_that.scrollTop = 0
				});
			},
			scroll(e) {
				let _that = this
				_that.old.scrollTop = e.detail.scrollTop
			},
			searchTab(){
				var url = getUrl(this.areaEditor.link, this.areaEditor.linkParam)
				uni.navigateTo({
					url: url
				})
			},
			cancel(){
				let _that = this
				_that.$emit('cancle')
			},
			comfirm(){
				let _that = this
				_that.$emit('selected',_that.selectArr,_that.areaEditor,_that.placeItem)
			},
			showItemClick(index){
				let _that = this
				_that.isBack = true
				_that.active = index
				if(index == 0){
					_that.getProvinceArr()
				}else{
					_that.placeClick({id:_that.selectArr[index-1].id,
					title:_that.selectArr[index-1].title,
					isSelect:_that.selectArr[index-1].isSelect,
					fullName:_that.selectArr[index-1].fullName
					})
				}
			},
			placeClick(item){
				let _that = this
				if(!item.isSelect){
					_that.isBack = false
					if(_that.selectArr[_that.active+1]){
						_that.selectArr.splice(_that.active,_that.selectArr.length-_that.active)
						_that.selectArr.push({title:item.dicname,id:item.id,isSelect:true,fullName:item.fullName})
						_that.placeItem = item
					}else{
						if(_that.selectArr[_that.active]){
							_that.selectArr[_that.active] = {title:item.dicname || item.title,id:item.id,isSelect:true,fullName:item.fullName ||  item.title}
							_that.placeItem = item
							_that.$forceUpdate()
						}else{
							_that.selectArr.push({title:item.dicname,id:item.id,isSelect:true,fullName:item.fullName})
							_that.placeItem = item
						}
					}
				}
				if(item.isSelect || _that.active < 2 ){
					_that.om.request(
						"regions/getRegionsCombobox",
						{
							parentId:item.id
						}
					).then(res=>{
						let cityArr = res.sort((a,b)=>a.py.localeCompare(b.py)) //根据首字母排序
						let obj = {}
						for(let index in cityArr){
							if(_that.selectArr.length>0 && cityArr[index].id == _that.selectArr[_that.active].id){
								_that.selectArr.splice(Number(_that.active),1,{title:cityArr[index].dicname,id:cityArr[index].id,isSelect:true,fullName:cityArr[index].fullName})
								_that.$set(cityArr[index],'checked',true)
								_that.placeItem = cityArr[index]
							}
							let letter = cityArr[index].py.substring(0,1).toUpperCase()
							if(index ==0){
								let arr = [cityArr[index]]
								_that.$set(obj,letter,arr)
							}else{
								if(cityArr[index].py.substring(0,1) == cityArr[index-1].py.substring(0,1)){
									let arr = obj[letter].push(cityArr[index])
								}else{
									let arr = [cityArr[index]]
									_that.$set(obj,letter,arr)
								}
							}
						}
						if(!item.isSelect){
							_that.active += 1
						}
						_that.showObj = obj
					})
				}else{
					for(let index in _that.showObj){
						for(let showItem of _that.showObj[index]){
							if(showItem.id != item.id){
								_that.$set(showItem,'checked',false)
							}else{
								_that.$set(showItem,'checked',true)
								_that.placeItem = showItem
								_that.$forceUpdate()
							}
						}
					}
					if(!_that.areaEditor.addressMobileProvinceId){
						_that.$emit('selected',_that.selectArr,_that.areaEditor,_that.placeItem)
					}
				}
				_that.goTop()
			},
			getProvinceArr(){
				let _that = this
				_that.om.request(
					"regions/getListByClassify_h5",
					{
						classifyCode:'35922'
					}
				).then(res=>{
					let provinceArr = res.value.sort((a,b)=>a.py.localeCompare(b.py)) //根据首字母排序
					let obj = {}
					for(let index in provinceArr){
						if(_that.selectArr.length>0 && provinceArr[index].id == (_that.selectArr[_that.active]?_that.selectArr[_that.active].id:'')){
							_that.$set(provinceArr[index],'checked',true)
							_that.placeItem = provinceArr[index]
						}
						let letter = provinceArr[index].py.substring(0,1).toUpperCase()
						if(index ==0){
							let arr = [provinceArr[index]]
							_that.$set(obj,letter,arr)
						}else{
							if(provinceArr[index].py.substring(0,1) == provinceArr[index-1].py.substring(0,1)){
								let arr = obj[letter].push(provinceArr[index])
							}else{
								let arr = [provinceArr[index]]
								_that.$set(obj,letter,arr)
							}
						}
					}
					_that.showObj = obj
				})
			}
		},
		mounted(){
			let _that = this
			if(_that.areaEditor.addressMobileProvinceId){
				_that.selectArr.push({id:_that.areaEditor.addressMobileProvinceId,title:_that.areaEditor.addressMobileProvinceName,
				fullName:_that.areaEditor.addressMobileProvinceName,
				isSelect:true
				})
				_that.isBack = true
				_that.active = 0
			}
			if(_that.areaEditor.addressMobileCityId){
				_that.selectArr.push({id:_that.areaEditor.addressMobileCityId,
				title:_that.areaEditor.addressMobileCityName,
				fullName:_that.areaEditor.addressMobileCityName,
				isSelect:true
				})
				_that.active = 1
			}
			if(_that.areaEditor.addressId){
				if(_that.areaEditor.addressId != _that.areaEditor.addressMobileProvinceId && _that.areaEditor.addressId != _that.areaEditor.addressMobileCityId){
					_that.selectArr.push({id:_that.areaEditor.addressId,title:_that.areaEditor.addressName,fullName:_that.areaEditor.addressName,isSelect:true})
					_that.active = 2
				}
			}
			if(_that.selectArr.length > 1){
				_that.placeClick(_that.selectArr[_that.selectArr.length-2])
			}else{
				_that.getProvinceArr()
			}
		}
	}
</script>

<style scoped>
	.content , .content-title{
		border-top-left-radius:10px;
		border-top-right-radius:10px;
	}
	.content{
		width: 100%;
		height: 600px;
		background-color: #fafafa;
	}
	.content-title{
		width: 100%;
		height: 80rpx;
		text-align: center;
		font-size: 15px;
		line-height: 80rpx;
		font-weight: bold;
		background-color: white;
	}
	.content-place{
		line-height: 40px;
		padding-left: 15px;
	}
	.area-scroll-view{
		height:400px;
	}
	.parent-area-scroll{
		position: relative;
	}
	.content-head{
		position: relative;
	}
	.content-title-cancel{
		width:30rpx;
		height: 30rpx;
		position: absolute;
		top:25rpx;
		right:30rpx;
	}
	.content-place-key , .area-scroll-tips , .content-title-showNoSelect{
		color:#8c8c8c ;
	}
	.content-place-key{
		width: 10px;
	}
	.area-scroll-tips{
		height: 100rpx;
		line-height: 100rpx;
		background-color: #fafafa;
		padding-left:15px;
	}
	.content-title-show{
		position: relative;
		height: 90rpx;
		background-color: white;
	}
	.content-title-showSelect{
		display: flex;
		height: 90rpx;
		line-height: 90rpx;
		flex-direction: row;
	}
	.content-title-showSelect-item , .content-title-showNoSelect{
		margin-left: 15px;
	}
	.content-title-showSelect-active{
		color: #4297ED;
	}
	.content-place-name{
		width: 100%;
	}
	.content-place-name-check{
		display: flex;
		justify-content: space-between;
	}
	.content-place-name-check_check{
		position: absolute;
		left: 90%;
	}
	.parent-area-scroll-tips{
		position: relative;
	}
	.area-scroll-tips-btn{
		position: absolute;
		right: 15px;
		top: 10px;
		height: 25px;
		line-height: 25px;
		border-radius: 10rpx;
	}
	.content-place-name-check_check_color{
		color: #4297ED;
	}
</style>                                                  
